<template>
  <div>
    <v-stage
      ref="stage"
      :config="configKonva"
      @mousedown="handleStageMouseDown"
      @touchstart="handleStageMouseDown"
    >
      <v-layer ref="layer">
        <div>
          <v-image
            ref="image"
            :config="configCircle"
            @transformend="handleTransformEnd"
            @mouseup="handleStageMouseUp"
          />
          <!-- <v-image :config="configCircle" @transformend="handleTransformEnd" /> -->
          <v-transformer ref="transformer1" />
        </div>
      </v-layer>
    </v-stage>
  </div>
</template>

<script>
import youdoImg from "./yoda.jpg";
const width = window.innerWidth;
const height = window.innerHeight;
import Konva from "konva";
export default {
  data() {
    return {
      image: null,
      configKonva: {
        width: 600,
        height: 600,
      },
      configCircle: {
        x: 0,
        y: 0,
        scaleX: 1,
        scaleY: 1,
        width: 100,
        height: 100,
        image: null,
        name: "draImg",
        draggable: true,
      },

      video: null,
      animation: null,
    };
  },
  props: {
    config: Object,
  },

  created() {
    const image = new window.Image();
    image.src = youdoImg; //"./yoda.jpg";
    image.onload = () => {
      // 图片加载完成后设置
      this.configCircle.image = image;
    };
  },
  watch: {
    config: {
      handler(newVal, oldVal) {
        this.configCircle.x = newVal.positionX;
        this.configCircle.y = newVal.positionY;
        if (newVal.width) {
          this.configCircle.width = (
            newVal.width / this.configCircle.scaleX
          ).toFixed(2);
        }
        if (newVal.height) {
          this.configCircle.height = (
            newVal.height / this.configCircle.scaleY
          ).toFixed(2);
        }

        console.log(this.configCircle);
      },
      deep: true,
    },
  },
  methods: {
    handleTransformMouseEnd() {
      console.log(444);
    },
    handleTransformEnd(e) {
      this.configCircle.x = parseInt(e.target.x()) || 0;
      this.configCircle.y = parseInt(e.target.y()) || 0;
      this.configCircle.rotation = e.target.rotation();
      this.configCircle.scaleX = e.target.scaleX().toFixed(2);
      this.configCircle.scaleY = e.target.scaleY().toFixed(2);

      this.config.width = this.configCircle.width * this.configCircle.scaleX;
      this.config.height = this.configCircle.height * this.configCircle.scaleY;

      this.config.positionX = this.configCircle.x;
      this.config.positionY = this.configCircle.y;
      console.log(this.configCircle, "dr2322", this.configCircle.x);
      this.$emit("setConfig", this.config);
      this.configCircle.fill = Konva.Util.getRandomColor();
    },
    handleStageMouseUp(e) {
      this.configCircle.x = parseInt(e.target.x()) || 0;
      this.configCircle.y = parseInt(e.target.y()) || 0;
      this.config.positionX = parseInt(e.target.x());
      this.config.positionY = parseInt(e.target.y());
      this.$emit("setConfig", this.config);
      console.log(this.configCircle, "mv111", e.target.x());
    },
    handleStageMouseDown(e) {
      // clicked on stage - clear selection
      if (e.target === e.target.getStage()) {
        // this.selectedShapeName = "";
        this.updateTransformer();
        return;
      }

      // clicked on transformer - do nothing
      const clickedOnTransformer =
        e.target.getParent().className === "Transformer";
      if (clickedOnTransformer) {
        return;
      }

      // find clicked rect by its name
      const name = e.target.name();
      const rect = this.configCircle;
      //   if (rect) {
      //     this.selectedShapeName = name;
      //   } else {
      //     this.selectedShapeName = "";
      //   }
      this.updateTransformer();
    },
    updateTransformer() {
      // here we need to manually attach or detach Transformer node
      const transformerNode = this.$refs.transformer1.getNode();
      const stage = transformerNode.getStage();
      //   const { selectedShapeName } = this;

      //   const selectedNode = stage.findOne("." + selectedShapeName);
      const selectedNode = stage.findOne("." + "draImg");
      // do nothing if selected node is already attached
      if (selectedNode === transformerNode.node()) {
        return;
      }

      if (selectedNode) {
        // attach to another node
        transformerNode.nodes([selectedNode]);
      } else {
        // remove transformer
        transformerNode.nodes([]);
      }
    },
  },
};
</script>
<style lang="scss">
.konvajs-content {
  border: 1px solid #ccc;
}
</style>
